<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入css 样式-->
    <link rel="stylesheet"  href="/layui/css/layui.css">
    <!--    引入js -->
    <script src="/layui/jquery-3.6.0.min.js"></script>
    <script src="/layui/layui.js"></script>
</head>
<body background="/images/2.jpg">

<div style=";margin-top: 30px;margin-left: 20%;width: 60%">
    <form class="layui-form layui-form-pane"  action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称：</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-block">
                <input type="password" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                <input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" value="x21g">
                <div class="captcha-img">
                    <img id="captchaPic" src="images/captcha.jpg">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a href="index.html">登录</a>
                <a href="index.html">重置</a>
            </div>
        </div>
    </form>

</div>
<script>
    layui.use(['form','laydate','layarea'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate=layui.laydate,
            $ = layui.$;

        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.name == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }

            //请求接口 Ajax
            $.post("/api/user/login.do",data,(res)=>{
                if(res.code==0){
                    localStorage.setItem("username",data.username);
                    sessionStorage.setItem("userid",res.data.id);
                    location.href="index.html";
                }else {
                    layer.msg(res.msg);
                }
            })
            return false;
        });
    });
</script>
</script>
</body>
</html>